<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-表单组件</title>
    <!--Vue必须放上面-->
    <script src="../js/vue.js"></script>
    <!--ElementUi-->
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
           <el-button icon="el-icon-plus" type="primary" @click="flag = true">添加用户</el-button>

           <el-dialog :visible.sync="flag" title="添加用户信息">
               <!--
                    表单组件：el-form > el-from-item
               -->
               <el-form>
                   <!--表单项： el-form-item-->
                   <el-form-item label="用户" label-width="60px">
                       <el-input name="username" type="text" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="adduser.username"></el-input>
                   </el-form-item>

                   <el-form-item label="年龄" label-width="60px">
                       <el-input-number name="age" :min="0" :max="120" :step="1" v-model="adduser.age"></el-input-number>
                   </el-form-item>

                   <el-form-item label="性别" label-width="60px">
                       <el-radio-group v-model="adduser.sex">
                           <el-radio name="sex" label="1">男</el-radio>
                           <el-radio name="sex" label="0">女</el-radio>
                       </el-radio-group>
                   </el-form-item>

                   <el-form-item label="生日" label-width="60px">
                        <el-date-picker name="birthday" type="datetime" v-model="adduser.birthday"></el-date-picker>
                   </el-form-item>

                   <el-form-item  label="地址" label-width="60px">
                       <el-input name="address" prefix-icon="el-icon-location" type="text" placeholder="请输入地址" v-model="adduser.address"></el-input>
                   </el-form-item>

                   <el-form-item label="爱好" label-width="60px">
                       <el-checkbox-group v-model="adduser.hobby">
                           <el-checkbox label="1" name="bobby">抽烟</el-checkbox>
                           <el-checkbox label="2" name="bobby">喝酒</el-checkbox>
                           <el-checkbox label="3" name="bobby">槟榔</el-checkbox>
                       </el-checkbox-group>
                   </el-form-item>

                   <el-form-item label="职业" label-width="60px">
                       <el-select v-model="adduser.job">
                           <el-option name="job" label="程序猿" value="1"></el-option>
                           <el-option name="job" label="攻城狮" value="2"></el-option>
                           <el-option name="job" label="码农" value="3"></el-option>
                       </el-select>
                   </el-form-item>

                   <el-form-item label="婚姻" label-width="60px">
                       <el-switch name="merry" inactive-text="未婚" active-text="已婚" v-model="adduser.merry"></el-switch>
                   </el-form-item>

                  <el-from-item>
                      <el-row type="flex" justify="center">
                          <el-col :span="4">
                              <el-button type="success" icon="el-icon-check">确定</el-button>
                          </el-col>
                          <el-col :span="4">
                              <el-button type="danger" icon="el-icon-close">取消</el-button>
                          </el-col>
                      </el-row>
                  </el-from-item>
               </el-form>
           </el-dialog>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                flag:false,
                adduser:{
                    username:undefined,
                    age:0,
                    sex: "1",
                    birthday:undefined,
                    address:undefined,
                    hobby:["1"],
                    job:"1",
                    merry:false,
                }
            },
            methods: {}
        });
    </script>
</body>
</html>